<template>
    <van-list v-model:loading="loading" v-model:finished="finished" @load="onLoad" :immediate-check="false">
        <ul>
            <li v-for="(item, index) in list" :key="index" class="item" @click="goToDetail(item.season_id)">
                <van-image :src="proxyImageUrl(item.vertical_cover)" class="cover"></van-image>
                <div class="info">
                    <div class="title">{{ item.title }}</div>
                    <div class="last_chapter">{{ getLastChapter(item.last_short_title, item.total) }}</div>
                </div>
            </li>
        </ul>
    </van-list>
</template>
<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { fetchList } from "@/api/index"
import { proxyImageUrl } from "@/tool/index"

import { useRouter } from "vue-router"
const router = useRouter()

const loading = ref(false)
const finished = ref(false)

const props = defineProps(['style_id', 'area_id', 'status_id', 'price_id', 'order_id', 'special_id'])
const styleId = computed(() => props.style_id)
const areaId = computed(() => props.area_id)
const statusId = computed(() => props.status_id)
const priceId = computed(() => props.price_id)
const orderId = computed(() => props.order_id)
const specialId = computed(() => props.special_id) //可选
const page_num = ref(1)
const page_size = ref(15)
const list = ref([])
// 更新
const getLastChapter = (last_short_title, total) => {
    if (parseInt(last_short_title) == total) {
        //完结
        return `[完结] 共${total}话`
    } else if (last_short_title.includes('话')) {  //  123话
        return `更新至 ${last_short_title}`
    } else if (isNaN(last_short_title)) {    // 打卡
        return `更新至 ${last_short_title}`
    } else {
        return `更新至 ${last_short_title}话`
    }
}
const getList = async (style_id, area_id, is_finish, order, is_free, page_num, page_size, special_id) => {

    loading.value = true
    const { data } = await fetchList(style_id, area_id, is_finish, order, is_free, page_num, page_size, special_id)
    console.log(data)
    if (data.length === 0) {
        loading.value = false
        finished.value = true
        return;
    }
    list.value.push(...data)
    loading.value = false
}
onMounted(() => {
    //加载默认的数据
    getList(styleId.value, areaId.value, statusId.value, orderId.value, priceId.value, page_num.value, page_size.value, specialId.value);
    // getList();
});




watch(
    [() => props.style_id, () => props.area_id, () => props.status_id,
    () => props.price_id, () => props.order_id, () => props.special_id],
    ([newStyleId, newAreaId, newStatusId, newPriceId, newOrderId, newSpecialId]) => {
        // 清空现有列表数据
        list.value = [];

        // 重置页码
        page_num.value = 1;

        console.log('发起新请求');

        // 当任意属性发生变化时执行 getList
        getList(
            newStyleId,
            newAreaId,
            newStatusId,
            newOrderId,
            newPriceId,
            page_num.value,
            page_size.value,
            newSpecialId
        );
    },
    { immediate: true } // 首次加载时也执行
);
// 加载更多数据
const onLoad = () => {
    page_num.value++;
    console.log(`加载第${page_num.value}页`);
}

const goToDetail = (id) => {
    router.push({ path: `/detail/${id}` })

};

</script>
<style scoped lang="scss">
ul {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 20px;

    li.item {
        list-style: none;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;

        .cover {
            width: 100%;
            height: auto;
        }

        .info {
            margin-top: 10px;
            width: 100%;

            .title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                margin-bottom: 5px;
                font-size: 14px;
                color: #222;
            }

            .last_chapter {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>